<template >
    <div >
       <div class="container" >  
           <div class="iconl"  >
             <van-icon name="search"  size="35"  />  
               <van-icon name="scan"  size="35" />
               </div>    
 <!-- 轮播图 -->
 <van-swipe class="my-swipe"  :autoplay="3000" >
  <van-swipe-item>
      <img src="/Header.img.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
     <img src="/Header1LB.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
      <img src="/Header2LB.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
      <img src="/Header3LB.jpg" alt="">
  </van-swipe-item>
</van-swipe>
           
   <!-- 详情模块 -->
    <div class="online">
      <!-- icon -->
      <div class="top">
        <router-link to="/myrestaurant">
        <div>
          <van-icon name="todo-list"  size="50" />
          <div id="time">运营时间</div>
        </div>
        </router-link>
        <router-link to="/vistor">
        <div>
          <van-icon name="friends"  size="50" />
          <div id="server">游客服务</div>
        </div>
        </router-link>
        <router-link to="/order">
        <div>
          <van-icon name="balance-list"  size="50" />
          <div id="my">我的订单</div>
        </div>
        </router-link>
      </div>
      <!-- 在线购票button -->
      <router-link to="/buyticket">
      <div class="bottom">
        <div>
          <van-button round type="info"  block></van-button>
        </div>
        
        <div>
          在线购票
        </div>
      </div>
      </router-link>
    </div>
           <!-- 玩乐 模块 -->
                    <div class="wanle">玩乐项目</div>
                  <div class="slip">
                <van-swipe @change="onChange" class="swipe">
                  <router-link to="/dolphin">
                <van-swipe-item>
                    <img src="/Header5WL.jpg" alt="" >
                    <div class="img1">
                     <h4>哈利波特.与禁忌之旅 TT</h4>
                       <p>哈利波特的魔法世界</p>
                    </div>
                </van-swipe-item>
                    </router-link>
                <van-swipe-item class="swipe">
                     <img src="/Header6WL.jpg" alt="">
                     <div class="img1">
                     <h4>哈利波特.与禁忌之旅 TT</h4>
                       <p>哈利波特的魔法世界</p>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="swipe">
                     <img src="/Header7WL.jpg" alt="">
                      <div class="img1">
                     <h4>哈利波特.与禁忌之旅 TT</h4>
                       <p>哈利波特的魔法世界</p>
                    </div>
                </van-swipe-item>
                <template #indicator>
            <div class="custom-indicator">{{ current }}</div>
          </template>
        </van-swipe>
        </div>
                                 
            </div>
         </div>
</template>

<script>
//引用标题栏
export default {
  data() {
    return {
      current: '',
      active:'',
    };
  },
  methods: {
    onChange() {
      this.current = id;
    },
  },
};

</script>


<style scoped >
 *  ::after ::before{
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
}

 
 .container{
  background-color: #518593; 
     margin:0 auto ;    
     width: 100%;
     height: 100%;
 }
/* 标题栏 */
 .container>.iconl{
     line-height: 30px;
    height: 6vh; 
}

 /* 顶部条 图标 */
.container> .iconl > i{
   color: #fff ;
   margin: 1vh;
  }
 
    /* 轮播图区域 */
.my-swipe  {
    width: 100%;  
  }
  /* 头部轮播图片*/
  img{
      width: 100%;
      height: 28vh;
   }
 .online{
  background-color: #fff;
  height: 196px;
  width: 82vw;
  margin: 37px;
  border-radius: 20px;
}
.top{
  display: flex;
  padding-top: 20px;
  justify-content: space-evenly;
}
#time{
  font-size: 0.8em;
}
#server{
  font-size: 0.8em;
}
#my{
  font-size: 0.8em;  
}
.bottom>div:first-child{
  margin-top: 40px;
  padding: 0px 45px;
}
.bottom>div:last-child{
  position: relative;
  top: -35px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

/* 玩乐字体 */
.wanle{
  font-size: 20px;
  font-weight: bold;
   color: #fff;
   margin: 40px 0px 6px  30px;
}
/* 滑动轮播 */

 .container>  .slip{
    width: 86vw;
    height: 30vh;
    margin: auto; 
    /* 页底流控 */
    padding-bottom: 50px;
   
   }
.custom-indicator {
    width: 100%;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px; 
    font-size: 12px;
  }
 .container>.slip>.swipe{
    width: 80vw;
    height: 31vh;
    padding:5px ;
    margin: auto;
     border-radius: 15px;
  }
   
  
.swipe img{
    width: 76vw;
    height: 20vh;
   object-fit: cover;
     border-radius: 15px 15px 0px 0px ; 
     position: relative;
 }
 
   .img1{
     width: 76vw;
     height: 6vh;
    background-color: #fff; 
      position: absolute;
      top: 18vh;
      padding: 8px 0px  8px 0px;
     border-radius:0px 0px 20px 20px;
}

  .img1 > h4{
   margin: 23px 0px 0px 20px;
}
.img1 >p{
   font-size:10px;
   color: grey;
}
                                                                       
/* 游乐图片 */
    .yl>img{
     width: 100%;
     border-radius:20px ;
     margin-left: ;
     display: block; 
 }  
 
/* 底部栏 */

.footicon{
    color: black;
    
}
</style>
<style lang="scss" scoped>
</style>